<template>
    <div>
        <Card :students="stus" />
        <div class="addBtn">
            <el-button size="large" type="primary" @click="openDrawer">新增</el-button>
        </div>
        <el-drawer v-model="show" size="500" title="新增成绩" :width-header="true">
            <Add @addStu="add"></Add>
        </el-drawer>
    </div>
</template>
  
<script>
//1.引入组件
import {ref} from 'vue'
import Add from './components/Add.vue';
import Card from './components/Card.vue';


export default {
    name: 'Report',
    components: {
        //2.注册组件
        Card,
        Add
    },
    setup() {
       
        const stus =ref([
            { name: '张三', age: 20, sex: '男', score: { yw: 80, sx: 89, yy: 90 }, avatar: 'https://img0.baidu.com/it/u=482887487,789058463&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500', },
            { name: '李四', age: 20, sex: '男', score: { yw: 88, sx: 46, yy: 74 }, avatar: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201607%2F13%2F20160713224905_Q8PEh.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1720060389&t=ae45c8564609214374a5d02e56b7cda8', },
            { name: '王五', age: 20, sex: '男', score: { yw: 60, sx: 77, yy: 87 }, avatar: 'https://img2.baidu.com/it/u=1249821604,194896080&fm=253&fmt=auto?w=400&h=400', },
            // Math.random() 静态方法返回一个大于等于 0 且小于 1 的伪随机浮点数，并在该范围内近似均匀分布，然后你可以缩放到所需的范围。
            // Math.floor() 函数总是返回小于等于一个给定数字的最大整数。
        ]) ;
        const show = ref(false);
        const openDrawer=function(){
            show.value=true;
        };
        const add=function(stu){
            stus.value.push(stu)
            show.value=false;
            
        }
        return {
            stus,
            show,
            openDrawer,
            add

        }
    }
}


</script>
  
<style>
#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
}
</style>
  